<link rel="stylesheet" href="<?php echo base_url() ?>assets/css/application/lesson.css">

<script type="text/javascript" src="<?php echo base_url() ?>assets/js/pages/lesson.js"></script> <!-- Page Effects -->
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/sly.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>assets/js/sly-plugins.js"></script>

<div class="change-view-btn" ng-click="setLessonView()" ng-show="timelineData">
	<span ng-show="timelineView">Xem dạng <br> Bài viết</span>
	<span ng-hide="timelineView">Xem dạng <br> Không gian - Thời gian</span> 
	<br>
	<span class="glyphicon glyphicon-eye-open"></span>
</div>
<p ng-hide="timelineView">&nbsp; &nbsp; </p>
<div class="wrapper page-view oo" ng-hide="timelineView">
	<p class="groups">
		<a class="grp" href="#/category/{{catType._id}}">{{catType.str}}</a> &nbsp; <i class="fa fa-caret-right"></i> &nbsp; 
		<a class="grp" href="#/cat/{{cat._id}}">{{cat.name}}</a>

		<span class="glyphicon bookmark" 
			ng-class="{'glyphicon-star-empty': isBookmark==false, 'glyphicon-star': isBookmark==true}"
			ng-click="toggleBookmark()">
		</span>
	</p>
	<div class="header">		
		<h1 class="titl"> {{title | removeLesson}} </h1>		
		<!-- <p class="grade"><a href="#/class/07">Lớp 7</a> - <a href="#/class/08">Lớp 8</a></p> -->
	</div>
	<!-- <div class="content" ng-bind-html="content"></div> -->
	<div ng-bind-html="content" class="lessoncontent">
		
	</div>
</div>

<div class="timeline-view full-page oo" ng-show="timelineView">
	<div class="lesson-title text-center">
		<div class="wrapper" style="margin: auto">
			{{title}}
		</div>
	</div>
	<div class="wrapper">
		<div class="timeline-col">
			<div class="titl text-center">
				<span class="glyphicon glyphicon-time" aria-hidden="true"></span> &nbsp; 
				DÒNG THỜI GIAN
			</div>
			<ul class="timeline">
				<li ng-repeat="time in timelineData" class="time" ng-class="{selected: timelineIndex == $index}"
					ng-click="getTimelineContent($index)">
					{{time.time}}
				</li>

			</ul>
		</div>
		<div class="maps-col">
			<div id="timeline-map"></div>

			<div class="content">
			</div>
		</div>
	</div>
</div>

<div class="clearfix"></div>

<div class="question-section" ng-show="questionList.length > 0">
	<div class="wrapper">
		<h3 class="head">Một số câu hỏi thi học kỳ</h3>
		<div class="scrollbar">
			<div class="handle"></div>
		</div>
		<div id="question-list">
			<ul class="list slidee">
				<li ng-repeat="q in questionList" ng-click="popupQuestion(q)">
					{{q.question}}
				</li>
			</ul>
		</div>
		<div class="controls">
			<span class="btn btn-default prevPage"><span class="glyphicon glyphicon-step-backward"></span></span>
			<!-- <span class="btn btn-default prev"><span class="glyphicon glyphicon-chevron-left"></span></span> -->
			<!-- <span class="btn btn-default next"><span class="glyphicon glyphicon-chevron-right"></span></span> -->
			<span class="btn btn-default nextPage"><span class="glyphicon glyphicon-step-forward"></span></span>
		</div>
	</div>
</div>

<div class="comments-section full-page">
	<div class="wrapper">
		<h3 class="head">Thảo luận - Hỏi Đáp</h3>

		<div class="new-topic" ng-show="$parent.isLogin">
			<!-- <p><strong>Chủ đề mới</strong></p> -->
			<textarea name="" id="newTopic" rows="7" class="form-control" ng-model="newTopic"></textarea> <br>
			<button class="btn btn-sm btn-warning pull-right" ng-click="addTopic()">ĐĂNG BÌNH LUẬN</button>
		</div>
		<div class="clearfix"></div>
		<hr>
		<ul class="cm-list">
			<li ng-repeat="cmt in comments">
				<span class="avatar"><img src="" alt=""></span>
				<span class="user">{{cmt.user}}</span> - <span class="time">{{cmt.time}}</span> <br />
				<span class="content">{{cmt.content}}</span>
				<div class="clearfix"></div>
				<ul class="cm-child">
					<li ng-repeat="cCmt in cmt.childs">
						<span class="avatar"><img src="" alt=""></span>
						<span class="user">{{cCmt.user}}</span> - <span class="time">{{cCmt.time}}</span> <br />
						<span class="content">{{cCmt.content}}</span>
						<div class="clearfix"></div>
					</li>
				</ul>

				<span class="repl-btn" 
					ng-show="$parent.isLogin" 
					data-toggle="modal" 
					data-target="#popup-comment"
					ng-click="replyCmt.parent = cmt._id.$id">
					Trả lời
				</span>
			</li>
		</ul>
		
	</div>	
</div>

<!-- ======================================================================= -->
<div id="popup-question" class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span>
					<span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">{{pQ.question}}</h4>
			</div>
			<div class="modal-body">
				<div class="answer">
					<p class="head">Gợi ý: </p>
					<div class="answer-content" ng-bind-html="pQ.answer">
						
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-warning" data-dismiss="modal">Đóng</button>
			</div>
		</div>
	</div>
</div>

<div id="popup-comment" class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span>
					<span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">Bình luận trả lời</h4>
			</div>
			<div class="modal-body">
					<textarea rows="6" class="form-control" ng-model="replyCmt.content">
					</textarea>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-warning" ng-click="replyComment()">Trả lời</button>
				<button type="button" class="btn btn-warning" data-dismiss="modal">Đóng</button>
			</div>
		</div>
	</div>
</div>